import { useState, useEffect } from 'react'
import Item from './item'
import './App.css'
// 随机数的数组
let ab = []
// 处理完的数组
let ac = []
// 格式
let ad = []
// 生成随机数函数
const set = (a, b) => {
  if (a === b) {
    ab.push(a)
    return
  }
  const result = Math.floor((Math.random() * (b - a + 1))) + a
  ab.push(result)
  if (result === a) {
    set(result + 1, b)
  } else if (result === b) {
    set(a, result - 1)
  } else if (result !== a && result !== b) {
    if (Math.random() > 0.5) {
      set(a, result - 1)
      set(result + 1, b)
    } else {
      set(result + 1, b)
      set(a, result - 1)
    }
  }
}
//  处理随机数
function hanlde(arr, a) {
  ab.forEach(item => {
    ad.push(item)
    if (ad.length === a) {
      ac.push(ad)
      ad = []
    }
  })
}
// 初始化
function start(params) {
  ab = []
  ac = []
  ad = []
  switch (params) {
    case 3:
      set(0, 8)
      hanlde(ab, 3)
      break;
    case 5:
      set(0, 24)
      hanlde(ab, 5)
      break;
    case 7:
      set(0, 48)
      hanlde(ab, 7)
      break;
  }
}
start(3)

function App() {
  const [list, setList] = useState(ac)
  const [whiteList, setWhiteList] = useState([])
  const [zero, setZero] = useState()
  const [current, setCurrent] = useState(3)
  const [count, setCount] = useState(0)
  const click = async (x, y) => {
    const result = whiteList.some(item => {
      return item[0] === x && item[1] === y
    })
    if (result) {
      const arr = [...list]
      let a = arr[x][y]
      arr[x][y] = 0
      arr[zero[0]][zero[1]] = a
      setList(arr)
      setCount(v => v + 1)
    };
  }
  // 处理可点击
  const hanldWhite = () => {
    let x
    let y
    list.some((row, xx) => {
      return row.some((item, yy) => {
        if (item === 0) {
          x = xx
          y = yy
          return true
        }
      })
    })
    const arr = []
    arr.push([x, y + 1])
    arr.push([x, y - 1])
    arr.push([x + 1, y])
    arr.push([x - 1, y])
    setWhiteList(arr)
    setZero([x, y])
  }
  useEffect(() => {
    console.log(666);
    hanldWhite()
    win()
  }, [list])
  // 示例
  const setExample = async () => {
    const arr = [[0, 1, 2], [3, 4, 5], [6, 7, 8]]
    setList(arr)
    setCount(0)
  }
  // 检查赢的情况
  const win = () => {
    const arr1 = []
    list.forEach(arr => {
      arr.forEach(item => {
        arr1.push(item)
      })
    })
    if (arr1.every((item, index) => {
      return item === index
    })) {
      alert('你赢了')
    }
  }

  const newGame = () => {
    setCount(0)
    start(current)
    setList(ac)
  }
  const changeCurrent = (e) => {
    setCount(0)
    setCurrent(e)
    start(e)
    setList(ac)
  }
  function render() {
    return (<div className="con">
      <div className="col">
        {list.map((row, x) => {
          return <div className="row" key={x}>{row.map((item, y) => {
            return (<Item key={y} x={x} y={y} item={item} click={click} />)
          })}</div>
        })}

      </div>
      <div className="abc">
        <button className="example" onClick={setExample}>示例</button>
        <button className="game" onClick={newGame}>new game</button>
        <div className="current">
          <button className="game" onClick={() => changeCurrent(3)}>3x3</button>
          <button className="game" onClick={() => changeCurrent(5)}>5x5</button>
          <button className="game" onClick={() => changeCurrent(7)}>7x7</button>
        </div>
      </div>
    </div>)
  }
  return (< div className="App" >
    <h2>点击白块四周数字调换位置，数字按顺序排列则成功</h2>
    <h3 className="count">当前步数：{count}</h3>
    {render()}
  </div>
  );
}

export default App;